<template>
  <div>
    <NormalForm pageTitle="" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery"
      @handleReset="handleReset"></NormalForm>
    <div class="g-card">
      <div class="table-top">
        <div class="title">目标查询列表</div>
      </div>
      <div style="padding: 0 20px 20px 20px">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" height="475">
          <el-table-column label="机构名称" align="center" prop="aaaa" show-overflow-tooltip :min-width="160" />
          <el-table-column label="13月继续率目标" align="center" prop="bbbb" show-overflow-tooltip :min-width="160">
            <template slot-scope="scope">
              <span v-if="scope.$index > 0 && scope.$index < 3" style="color:#F27878;">未设定</span>
              <span v-else-if="scope.$index == 3" style="color:#F27878;">84.2 <span class="c-a">!</span></span>
              <span v-else>{{scope.row.bbbb}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前13月继续率" align="center" prop="cccc" show-overflow-tooltip :min-width="160" />
          <el-table-column label="25月继续率目标" align="center" prop="eeee" show-overflow-tooltip :min-width="160">
            <template slot-scope="scope">
              <span v-if="scope.$index > 0 && scope.$index < 2" style="color:#F27878;">未设定</span>
              <span v-else-if="scope.$index == 3" style="color:#F27878;">84.2 <span class="c-a">!</span></span>
              <span v-else>{{scope.row.bbbb}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前25月继续率" align="center" prop="dddd" show-overflow-tooltip :min-width="160" />
          <el-table-column label="操作" align="center" prop="policytype" show-overflow-tooltip :min-width="180">
            <template slot-scope="scope">
              <div class="option-span">
                <el-button size="mini" type="text" @click="">调整目标基准值</el-button>
                <el-button size="mini" type="text" @click="">查看历史目标达成情况</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
          @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ManagementSearch",
  data() {
    return {
      total: 0,
      loading: false,
      tableList: [
        {
          aaaa: "01-上海机构",
          bbbb: "76.5%",
          cccc: "94.6%",
          dddd: "92.2%",
          eeee: "91.1%",
        },
        {
          aaaa: "02-无锡机构",
          bbbb: "92.2%",
          cccc: "91.1%",
          dddd: "76.5%",
          eeee: "94.6%",
        },
        {
          aaaa: "03-常州机构",
          bbbb: "92.2%",
          cccc: "94.1%",
          dddd: "73.5%",
          eeee: "91.6%",
        },
        {
          aaaa: "04-扬州机构",
          bbbb: "98.2%",
          cccc: "97.1%",
          dddd: "74.5%",
          eeee: "94.6%",
        },
        {
          aaaa: "05-泰州机构",
          bbbb: "92.2%",
          cccc: "81.1%",
          dddd: "75.5%",
          eeee: "92.6%",
        },
        {
          aaaa: "05-南京机构",
          bbbb: "92.2%",
          cccc: "81.1%",
          dddd: "75.5%",
          eeee: "92.6%",
        },
      ],
      queryForm: {
        tasktype: "",
        institution: "",
        branchtype: "",
        policytype: "",
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: "渠道",
          defaultNoLabel: true,
          formLabel: true,
          value: "",
          prop: "branchtype",
          type: "SELECT",
          emunName: "channelList",
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: "继续率类型",
          defaultNoLabel: true,
          formLabel: true,
          value: "",
          prop: "institution",
          type: "SELECT",
          emunName: "manageComList",
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: "统计维度",
          defaultNoLabel: true,
          formLabel: true,
          value: "",
          prop: "tasktype",
          type: "SELECT",
          emunName: "taskTypeList",
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: "机构",
          defaultNoLabel: true,
          formLabel: true,
          value: "",
          prop: "policytype",
          type: "SELECT",
          emunName: "insuranceTypeList",
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: "目标设定状态",
          defaultNoLabel: true,
          formLabel: true,
          value: "",
          prop: "policytype",
          type: "SELECT",
          emunName: "insuranceTypeList",
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
      ],
      enumOpt: {
        taskTypeList: [],
        channelList: [],
        manageComList: [],
        insuranceTypeList: [],
      },
    };
  },
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn();
    },
    handleReset() {
      this.queryForm = {
        tasktype: "",
        institution: "",
        branchtype: "",
        policytype: "",
        pageNum: 1,
        pageSize: 20,
      };
      this.getListFn();
    },
    getListFn() {},
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";
.c-a {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background-color: #fbe6e2;
}
.table-top {
  padding: 20px;
  height: 72px;
  border-bottom: 1px dashed #d9d9d9;
  margin-bottom: 12px;
  //line-height: 32px;
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.drawer-fromBtn {
  display: flex;
  justify-content: end;
  padding: 16px 32px 0 0;
}
</style>